<template>
    <div class="rootMain">
       
        <el-form label-position="right" label-width="110px">
            <el-form-item label="社保缴纳基数">
                <el-input v-model="socialTax"></el-input>
            </el-form-item>
            <el-form-item label="公积金缴纳基数">
                <el-input v-model="fundTax"></el-input>
            </el-form-item>
            <el-form-item label="公积金缴纳比列">
                <el-select
                    v-model="index"
                    placeholder="请选择比例"
                    @change="PickerChange"
                >
                    <el-option
                        v-for="(item, index) in picker"
                        :key="index"
                        :label="item"
                        :value="index"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div class="tax-bj">
            <el-descriptions title="计算结果： " :column="2">
                <el-descriptions-item label="月缴(元)">
                    <div class="tax-bj-div">{{ monthMoney.toFixed(2) }}</div>
                </el-descriptions-item>
                <el-descriptions-item label="社保月缴(元)">
                    {{ socialMoney.toFixed(2) }}
                </el-descriptions-item>
                <el-descriptions-item label="公积金月缴(元)">
                    {{ fundMoney.toFixed(2) }}
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="but">
            <el-button @click="resetBtn">重置</el-button>
            <el-button type="primary" @click="countBtn">计算</el-button>
        </div>
    </div>
</template>

<script>
import moment from "moment";
export default {
    name: "securityCount",
    props: {
        item: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    data() {
        return {
            index: "",
            picker: ["5%", "6%", "7%", "8%", "9%", "10%", "11%", "12%"],
            socialTax: "",
            fundTax: "",
            monthMoney: 0,
            socialMoney: 0,
            fundMoney: 0,
            fundPercent: null,
        };
    },
    watch: {},
    created() {},
    mounted() {},
    computed: {},
    methods: {
        PickerChange(index) {
            this.index = index;
            this.fundPercent = this.picker[index].replace("%", "") / 100;
            console.log(this.fundPercent);
        },

        //重置
        resetBtn() {
            this.socialTax = "";
            this.fundTax = "";
            this.monthMoney = 0;
            this.fundMoney = 0;
            this.socialMoney = 0;
            this.index = "";
        },
        message(m) {
            this.$message({
                message: m,
                type: "warning",
            });
        },
        //计算
        countBtn() {
            if (this.fundTax != 0 && this.index == -1) {
                this.message("请选择公积金缴纳比例");
            }
            if (this.socialTax != 0) {
                const firm_endowment = Number(
                    (this.socialTax * 0.16).toFixed(2)
                );
                const per_endowment = Number(
                    (this.socialTax * 0.08).toFixed(2)
                );
                const firm_medicare = Number(
                    (this.socialTax * 0.064).toFixed(2)
                );
                const per_medicare = Number((this.socialTax * 0.02).toFixed(2));
                const firm_unemployment = Number(
                    (this.socialTax * 0.005).toFixed(2)
                );
                const per_unemployment = Number(
                    (this.socialTax * 0.005).toFixed(2)
                );
                const firm_injury = Number((this.socialTax * 0.002).toFixed(2));
                const per_injury = 0;
                const firm_birth = 0;
                const per_birth = 0;
                this.socialMoney =
                    firm_endowment +
                    per_endowment +
                    firm_medicare +
                    per_medicare +
                    firm_unemployment +
                    per_unemployment +
                    firm_injury;
            }
            if (this.fundTax != 0 && this.index != -1) {
                const firm_fund = (this.fundTax * this.fundPercent).toFixed(2);
                this.fundMoney = Number(firm_fund) * 2;
            }
            this.monthMoney = this.socialMoney + this.fundMoney;
        },
    },
};
</script>

<style lang="scss" scoped>
.rootMain {
    padding: 20px 22px;
}

.tax-bj-div{
    width: 100%
}
</style>
